<template>
  <div class="home">
    <!-- <h2>我是Home---{{ $store.state.count }}</h2>
    <button @click="add(1)">+1</button>
    <button @click="add(5)">+5</button>
    <button @click="add(10)">+10</button>
    <h3>
      计算属性 --- {{ $store.getters.newCount }}
    </h3> -->
    <!-- 执行vuex中actions中的函数 -->
    <!-- <div>
      {{ $store.state.list }}
    </div>
    <button @click="actions">actions</button> -->

    <!-- modules -->
    <h3>
      zhang: {{ $store.state.Zhang.name }}
      <button @click="ChangeName('Zhang')">修改</button>
    </h3>
    <h3>
      li: {{ $store.state.Li.name }}
      <button @click="ChangeName('Li')">修改</button>
    </h3>

    <button @click="asyncFnZ">张三异步</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  created() {
    // console.log(this.$store.getters['Zhang/newName'])
    console.log(this.$store)
  },
  methods: {
    add(count) {
      // 错误
      // this.$store.state.count += 1
      // 正确 -- 不传参
      // this.$store.commit 用来提交 mutations 中定义的方法
      // this.$store.commit('addCount')
      // 正确 -- 传参
      this.$store.commit('addCount', { count })
      // this.$store.commit('addCount', { count: 5 })
      // this.$store.commit('addCount', { count: 10 })
    },
    actions() {
      // dispatch  用于执行vuex中actions中的方法
      this.$store.dispatch('getList')
    },
    ChangeName(module) {
      this.$store.commit(module + '/changeName')
    },
    // 张三模块异步
    asyncFnZ() {
      this.$store.dispatch('Zhang/asyncFn')
      this.$store.dispatch('Li/asyncFn')
    }
  }
}
</script>
